<template>
  <div class="order">
    <div class="consignee">
      <!-- 联系人卡片 -->
      <van-contact-card
        :type="cardType"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="showList = true"
      />
      <!-- 联系人列表 -->
      <van-popup v-model="showList" position="bottom">
        <van-contact-list
          v-model="chosenContactId"
          :list="list"
          @add="onAdd"
          @edit="onEdit"
          @select="onSelect"
        />
      </van-popup>
      <!-- 联系人编辑 -->
      <van-popup v-model="showEdit" position="bottom">
        <van-contact-edit
          :contact-info="editingContact"
          :is-edit="isEdit"
          @save="onSave"
          @delete="onDelete"
        />
      </van-popup>
    </div>

    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="getCoupon"
      @click="showList = true"
      :chosen-coupon="chosenCoupon"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="getCoupon"
        :disabled-coupons="getDisCoupon"
        @change="onChange"
        show-exchange-bar:false
        :chosen-coupon="chosenCoupon"
      />
    </van-popup>

    <div class="goodslist">
      <van-card
        v-for="item in $store.state.orderList"
        :key="item.id"
        :num="item.amount"
        :price="item.price"
        desc="描述信息"
        :title="item.title"
        :thumb="item.image"
      />
    </div>
    <div class="goodsaction">
      <van-goods-action>
        <van-goods-action-icon>
          <template #default>
            <span class="orderTotalPrice">
              合计: ￥{{ orderTotalPrice && orderTotalPrice.toFixed(2) }}
            </span>
          </template>
        </van-goods-action-icon>
        <van-goods-action-button
          type="danger"
          text="确认购买"
          color="#31a5fc"
          @click="onClickButton"
        />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  ContactCard,
  ContactList,
  ContactEdit,
  Popup,
  Card,
  GoodsAction,
  Toast,
  CouponCell,
  CouponList,
  GoodsActionIcon,
  GoodsActionButton
} from "vant";
import { mapGetters } from "vuex";

Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);
Vue.use(Popup);
Vue.use(Card);
Vue.use(GoodsAction);
Vue.use(Toast);
Vue.use(GoodsActionIcon);
Vue.use(GoodsActionButton);
export default {
  name: "OrderConfirm",
  data() {
    return {
      chosenContactId: 0,
      editingContact: {},
      showList: false,
      showEdit: false,
      isEdit: false,
      chosenCoupon: -1,
      list: [
        {
          name: "隔壁老王",
          tel: "13001300130",
          id: 0
        }
      ]
    };
  },

  computed: {
    ...mapGetters(["getCoupon"]),
    ...mapGetters(["getDisCoupon"]),
    ...mapGetters(["orderTotalPrice"]),
    cardType() {
      return this.chosenContactId !== null ? "edit" : "add";
    },
    currentContact() {
      const id = this.chosenContactId;
      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
    }
  },
  methods: {
    // 添加联系人
    onAdd() {
      this.editingContact = { id: this.list.length };
      this.isEdit = false;
      this.showEdit = true;
    },
    // 编辑联系人
    onEdit(item) {
      this.isEdit = true;
      this.showEdit = true;
      this.editingContact = item;
    },
    // 选中联系人
    onSelect() {
      this.showList = false;
    },
    // 保存联系人
    onSave(info) {
      this.showEdit = false;
      this.showList = false;
      if (this.isEdit) {
        this.list = this.list.map(item => (item.id === info.id ? info : item));
      } else {
        this.list.push(info);
      }
      this.chosenContactId = info.id;
    },
    // 删除联系人
    onDelete(info) {
      this.showEdit = false;
      this.list = this.list.filter(item => item.id !== info.id);
      if (this.chosenContactId === info.id) {
        this.chosenContactId = null;
      }
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      // console.log(index)
      this.$store.state.chosenCoupon = index;
    },
    onClickButton() {
      Toast("恭喜你，购买成功");
      this.$store.state.couponList[this.$store.state.chosenCoupon];
    }
  }
};
</script>

<style lang="scss" scoped>
.order {
  height: 100%;
  .goodslist {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding-bottom: 100px;
    box-sizing: border-box;
  }
  .orderTotalPrice {
    font-size: 16px;
    font-weight: 700;
    color: #f00;
  }
}
</style>
